<!DOCTYPE html>
<html>
<head>
	<title>Bus/总线/发布订阅/观察者模式</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
	<style type="text/css">
		.fade-enter,
		.fade-leave-to {
			opacity: 0;
		}
		.fade-enter-active,
		.fade-leave-active {
			transition: opacity 3s;
		}
		
		
	</style>
</head>
<body>
	<div id="app">
		<fade :show="show">
			<h1>OK my love</h1>
		</fade>
		
		<button @click="handle">改变</button>
		
		
	</div>
</body>
<script type="text/javascript">
	// 这里便封装了一组动画，内容可写在插槽中
	Vue.component("fade", {
		props:['show'],
		template:"<transition name='fade'><slot v-if='show'></slot></transition>"
	})
	

	var vm = new Vue({
		el:"#app",
		data:{
			show:true
	
		},
		methods:{
			handle:function() {
				this.show = (this.show == true) ? false : true;
			}
		}

	})



		
</script>
</html>